<template>
  <div class="study-question">
    <div class="word-title">
      <span v-if="category != 2 || isChecked" class="click" @click="playAudio">
        <p v-for="(item, index) in wordData.paraphrase" :key="index">
          {{ item }}
        </p>
      </span>
    </div>

    <div class="word-box">
      <div class="img-box click">
        <span class="info-text" style="font-size: 18px" v-if="category == 3">
          <!-- 默写 -->
        </span>
        <div class="mr10" @click="playAudio" v-else>
          <AudioPlay
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + wordData.audioURL"
          ></AudioPlay>
        </div>
      </div>
      <div class="input-word">
        <!-- v-if="!isChecked" -->
        <div v-if="!isChecked">
          <el-input
            ref="wordInput"
            v-model="inputWord"
            placeholder=""
            @input="checkWord"
            @paste.native.capture.prevent="$handlePaste"
          ></el-input>
          <el-button class="word-nextBtn" type="primary" @click="keyCode13">下一个</el-button>
        </div>
        <!-- <input type="text" @paste="() => false" /> -->
        <div v-if="isChecked" class="wordInput">
          <span
            class="el-input__inner"
            :class="isChecked && !inputCheckAnswer ? 'input-false' : ''"
          >
            {{ inputWord }}
          </span>
          <img
            v-if="isChecked && inputCheckAnswer"
            src="@/assets/img/true-b.png"
            alt=""
          />
          <img
            v-if="isChecked && !inputCheckAnswer"
            src="@/assets/img/false-b.png"
            alt=""
          />
        </div>
        <p class="word-par" v-if="isChecked">
          {{ wordData.name }}
          <span v-if="wordData.phonetic" class="phonetic-info"
            >[{{ wordData.phonetic }}]</span
          >
          <el-button class="word-nextBtn-sure" type="primary" @click="keyCode13">确 定</el-button>
        </p>
      </div>
    </div>
    <AudioPlay
      v-if="category == 3"
      ref="audioPlay"
      :type="3"
      :audioSrc="baseURL + wordData.audioURL"
    ></AudioPlay>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
export default {
  data() {
    return {
      inputWord: "",
      isFirstCheck: true,
      inputCheckAnswer: null,
      isChecked: false,
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    // 输入校验答案
    checkWord(value) {
      console.log(value, this.inputWord);
      if (this.isFirstCheck) {
        return;
      }
      if (this.isChecked) {
        this.emptyInput();
      }
      let res = this.checkInputWord();
      if (!res) {
        this.checkedInputWord();
      }
    },
    focusWordInput() {
      if (this.$refs.wordInput) {
        this.$refs.wordInput.focus();
      }
    },
    // 校验现有输入内容是否正确
    checkInputWord() {
      let result = true;
      let trueAnswer = this.wordData.name.trim().split("");
      let stuAnswer = this.inputWord.trim().split("");
      if (stuAnswer.length > trueAnswer.length) {
        result = false;
      } else {
        stuAnswer.forEach((item, index) => {
          if (item != trueAnswer[index]) {
            result = false;
          }
        });
      }
      return result;
    },
    // 校验输入框答案，返回匹配结果
    matchingChar() {
      let trueAnswer = this.wordData.name.trim().split("");
      let stuAnswer = this.inputWord
        .trim()
        .split("")
        .map((item) => {
          return {
            str: item,
            isTrue: null,
          };
        });
      stuAnswer.forEach((item, index) => {
        if (item.str != trueAnswer[index]) {
          item.isTrue = false;
        } else {
          item.isTrue = true;
        }
      });
      return stuAnswer;
    },
    // 全匹配
    matchingCompleteChar() {
      return this.wordData.name.trim() == this.inputWord.trim();
    },
    // 校验单词操作
    checkedInputWord() {
      let res = this.matchingCompleteChar();
      this.isChecked = true;
      this.inputCheckAnswer = res;
      this.wordData.checkedNum++;
      this.$emit("checkTrueFun", res);
      if (!res) {
        this.wordData.wrongNum++;
        this.playAudio();
      }
    },
    // 清空输入框
    emptyInput() {
      this.inputWord = "";
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
    // 监听回车
    watchKeyUp(e) {
      this.$forceUpdate();
      if (this.isOpenMessageBox) {
        return;
      }
      if (e.keyCode == 13) {
        // isFirstCheck
        this.keyCode13();
      }
    },
    keyCode13: throttle(function () {
      if (!this.inputWord) {
        //没有输入单词提示请输入单词
        //
        return;
      }
      if (this.inputWord && !this.isChecked) {
        //校验输入单词
        if (this.isFirstCheck) {
          this.isFirstCheck = false;
        }
        //
        this.checkedInputWord();
        return;
      }
      if (this.inputWord && this.isChecked && this.inputCheckAnswer) {
        //校验结果正确，下一题
        this.$emit("nextWord");
        return;
      }
      if (this.inputWord && this.isChecked && !this.inputCheckAnswer) {
        //校验结果错误，清空输入框
        this.emptyInput();
        return;
      }
    }, 300),
    initCompon() {
      this.inputWord = "";
      this.isFirstCheck = true;
      this.inputCheckAnswer = null;
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
    this.focusWordInput();
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },

  props: {
    wordData: {
      type: Object,
    },
    type: {
      type: Number,
      default: 0,
    },
    category: {
      type: Number,
    },
    isOpenMessageBox: {
      type: Boolean,
    },
  },
  watch: {
    wordData() {
      this.initCompon();
    },
  },
};
</script>